<template>
  <div>
    <Header></Header>
    <div class="statusbox">
      <span>订单状态：{{ statusMap[order.status] }}</span>
      <span>订单id：{{ order.orderId }}</span>
      <span>创建时间：{{ order.time }}</span>
      <span>实付款：{{ priceTotal | rounding }}</span>
    </div>
    <div class="order">
      <el-table
        :data="order.order_has_items"
        tooltip-effect="dark"
        style="width: 100%; padding-bottom: 20px"
        :key="index"
      >
        <el-table-column label="商品信息" align="center">
          <template slot-scope="scope">
            <div class="wrapper">
              <img :src="`http://localhost:8080/api/v1/images/${scope.row.imageDir}/thumbnail.jpg`" alt="" />
              <span>{{ scope.row.item.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="单价" align="center">
          <template slot-scope="scope">￥{{ scope.row.item.price }}</template>
        </el-table-column>
        <el-table-column label="数量" align="center">
          <template slot-scope="scope">{{ scope.row.amount }}</template>
        </el-table-column>
        <el-table-column label="总价" align="center">
          <template slot-scope="scope"
            >￥{{ (scope.row.item.price * scope.row.amount) | rounding }}</template
          >
        </el-table-column>
      </el-table>
    </div>
    <div class="box" v-if="!complete">
      <div class="box" v-if="order.status === 3">
        <div class="button" @click="clickTalk()">收货协商</div>
        <div class="button" @click="clickRecieve()">确认收货</div>
      </div>
      <div class="box" v-if="order.status === 5">
        <div class="button" @click="clickTalkSuccess()">协商成功</div>
        <div class="button" @click="clickTalkFail()">协商失败</div>
      </div>
      <div class="box" v-if="order.status === 4">
        <div class="button" @click="clickReturn()">退货</div>
        <div class="button" @click="clickComplete()">完成订单</div>
      </div>
      <div class="box" v-if="order.status === 7">
        <div class="button" @click="clickCanelReturn()">取消退货</div>
        <div class="button" @click="clickReturnSuccess()">退货成功</div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'

export default {
  components: {
    Header
  },
  data () {
    return {
      order: [],
      priceTotal: 0,
      statusMap: [
        '创建',
        '已支付',
        '已出货',
        '已送达',
        '已收货',
        '收货协商中',
        '已完成',
        '退货中',
        '支付失败',
        '无法出货',
        '无法送达',
        '无法收货',
        '已退货'
      ],
      status: [
        'CREATED',
        'PAID',
        'SHIPPED',
        'ARRIVED',
        'RECEIVED',
        'RECEIVING',
        'COMPLETED',
        'REFUNDING',
        'FAIL_PAID',
        'FAIL_SHIP',
        'FAIL_ARRIVE',
        'FAIL_RECEIVE',
        'REFUNDED'
      ],
      complete: false,
      index: 0
    }
  },
  filters: {
    rounding (val) {
      return val.toFixed(2)
    }
  },
  mounted () {
    if (this.$route.params) {
      this.order = this.$route.params.item
      for (let i = 0; i < this.order.order_has_items.length; i++) {
        this.priceTotal +=
          this.order.order_has_items[i].item.price *
          this.order.order_has_items[i].amount
      }
    }
    this.changeStatusToNumber()
  },
  methods: {
    changeStatusToNumber () {
      for (let i = 0; i < this.status.length; i++) {
        if (this.status[i] === this.order.status) {
          this.order.status = i
          break
        }
      }
    },
    clickReturn () {
      this.$http.put('order', null, {
        params: {
          userId: JSON.parse(this.$cookie.get('userInfo')).userId,
          orderId: this.order.orderId,
          action: 60,
          status: this.order.status
        }
      }).then((res) => {
        this.order.orderId = res.data.orderId
        this.order.status = res.data.status
        this.changeStatusToNumber()
        console.log(res)
      })
    },
    clickTalk () {
      this.$http.put('order', null, {
        params: {
          userId: JSON.parse(this.$cookie.get('userInfo')).userId,
          orderId: this.order.orderId,
          action: 40,
          status: this.order.status
        }
      }).then((res) => {
        this.order.orderId = res.data.orderId
        this.order.status = res.data.status
        this.changeStatusToNumber()
        console.log(res)
      }).catch((err) => {
        console.log(err.response)
      })
    },
    clickRecieve () {
      this.$http.put('order', null, {
        params: {
          userId: JSON.parse(this.$cookie.get('userInfo')).userId,
          orderId: this.order.orderId,
          action: 41,
          status: this.order.status
        }
      }).then((res) => {
        this.order.orderId = res.data.orderId
        this.order.status = res.data.status
        this.changeStatusToNumber()
        console.log(res)
      })
    },
    clickTalkSuccess () {
      this.$http.put('order', null, {
        params: {
          userId: JSON.parse(this.$cookie.get('userInfo')).userId,
          orderId: this.order.orderId,
          action: 51,
          status: this.order.status
        }
      }).then((res) => {
        this.order.orderId = res.data.orderId
        this.order.status = res.data.status
        this.changeStatusToNumber()
        console.log(res)
      })
    },
    clickTalkFail () {
      this.$http.put('order', null, {
        params: {
          userId: JSON.parse(this.$cookie.get('userInfo')).userId,
          orderId: this.order.orderId,
          action: 50,
          status: this.order.status
        }
      }).then((res) => {
        alert('无法收货')
        this.order.orderId = res.data.orderId
        this.order.status = res.data.status
        this.changeStatusToNumber()
        console.log(res)
      })
    },
    clickComplete () {
      this.$http.put('order', null, {
        params: {
          userId: JSON.parse(this.$cookie.get('userInfo')).userId,
          orderId: this.order.orderId,
          action: 61,
          status: this.order.status
        }
      }).then((res) => {
        this.complete = true
        this.order.orderId = res.data.orderId
        this.order.status = res.data.status
        this.changeStatusToNumber()
        console.log(res)
      })
    },
    clickCanelReturn () {
      this.$http.put('order', null, {
        params: {
          userId: JSON.parse(this.$cookie.get('userInfo')).userId,
          orderId: this.order.orderId,
          action: 70,
          status: this.order.status
        }
      }).then((res) => {
        this.complete = true
        this.order.orderId = res.data.orderId
        this.order.status = res.data.status
        this.changeStatusToNumber()
        console.log(res)
      })
    },
    clickReturnSuccess () {
      this.$http.put('order', null, {
        params: {
          userId: JSON.parse(this.$cookie.get('userInfo')).userId,
          orderId: this.order.orderId,
          action: 71,
          status: this.order.status
        }
      }).then((res) => {
        alert('退货成功')
        this.order.orderId = res.data.orderId
        this.order.status = res.data.status
        this.changeStatusToNumber()
        console.log(res)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.statusbox {
  width: 80%;
  height: 100px;
  margin: 0 auto;
  background-color: rgb(243, 168, 140);
  span {
    display: inline-block;
    height: 100px;
    margin: 0 30px;
    font-size: 20px;
    color: #56595f;
    line-height: 100px;
  }
}
.order {
  width: 80%;
  margin: 0 auto;
}
.box {
  width: 80%;
  margin: 30px auto;
  display: flex;
  justify-content: right;
  .button {
    width: 100px;
    height: 50px;
    margin: 0 30px;
    color: white;
    text-align: center;
    line-height: 50px;
    background-color: rgb(252, 133, 89);
    border-radius: 20px;
    cursor: pointer;
  }
}
</style>
